<script>
    // import { useNavigate } from "svelte-navigator";

    // const navigate = useNavigate();


    import {push} from "svelte-spa-router";
    import { setlogin, setsocket} from "../src/main";
    import {setuser,thisuser} from "../src/main";

    import {JSEncrypt} from "jsencrypt";

    import Dialog, { Title, Content, Actions } from '@smui/dialog';
    import Button, {Label} from '@smui/button';

    // import {pushRoute} from "svelte-client-router"


    let open = false;
    let clicked = 'Nothing yet.';

    import Textfield from '@smui/textfield';
    import {isLogin} from "../store.js";

    let valueA = '';

    let account='';
    let password='';

    const data = 'data to crypt';

    function submit(){
        console.log("click button")
        fetch("/api/login",{
            method: "Post",
            mode: "no-cors",
            body: JSON.stringify({
                account: account,
                password: password,
            })
        }).then((res)=>{
            return res.json()
        }).then((res)=>{
            // console.log(res)
            // alert("登录成功！")
            if(res.status===0) {
                setlogin()
                setuser(account)
                setsocket()
                console.log(isLogin)

                isLogin.update(prev=>{
                    return true;
                })
                // console.log(thisuser)
                // navigate('/user')
                // push('/chat')
                console.log(isLogin)
                push('/homePage')
            }else{
                open=true
            }
        })

        const PUBLIC_KEY = `MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAst79ExyKJ1Bir60zkoK2
        vB4Y6b178JcJSqEivGXachboxFakVx4c6RiVos7Vbua5qz5fXnHFhIGXJF1z8Uh2
        9neJauYNZFXcUYgpRVfGpojSiOQpVkQGdxm4xwdzTCCfnAIgcElPXC1ucoRsiBzP
        CR0ctzGzRBMMUNwCrGuMlchj24ieFvr4/FXa17b3CIr3Rw+NGC+O+19/ZO2VQ/iu
        273c2r5uMqLwez3fJtgCNkVGHF77NoRBKYirK8bFIyoF8w01DFRiIGMEH1FoD3GT
        zd1hbjAPigdVHWjjmyKfgxXr2a2TvAcYyXiAgD9fXweo3Qo2HUz10FhB9ghYm21m
        IQIDAQAB`

        // 使用公钥加密
        const PublicEncrypt = new JSEncrypt() //new
        PublicEncrypt.setPublicKey(PUBLIC_KEY) //公钥赋值
        function GetPublicRes(data){
            // console.log(data)
            let result = PublicEncrypt.encrypt(data) //加密字段
            // console.log(result)
            return result
        }
        let res = GetPublicRes(data);

    }
</script>

<main>


    <Dialog
            bind:open
            aria-labelledby="simple-title"
            aria-describedby="simple-content"
    >
        <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
        <Title id="simple-title">提示</Title>
        <Content id="simple-content">账号密码错误</Content>
        <Actions>
<!--            <Button on:click={() => (clicked = 'No')}>-->
<!--                <Label>No</Label>-->
<!--            </Button>-->
            <Button on:click={() => (clicked = 'Yes')}>
                <Label>确定</Label>
            </Button>
        </Actions>
    </Dialog>
<!--    <Button on:click={() => (open = true)}>-->
<!--        <Label>Open Dialog</Label>-->
<!--    </Button>-->

<!--    <pre class="status">Clicked: {clicked}</pre>-->

    <h1>Welcome!</h1>

    <div style="padding-bottom: 12px">
        <Textfield
                class="shaped-outlined"
                variant="outlined"
                bind:value={account}
                label="账号"
        >
<!--            <HelperText slot="helper">Helper Text</HelperText>-->
        </Textfield>
<!--        <pre class="status">Value: {account}</pre>-->
    </div>
    <div style="padding-bottom: 12px">
        <Textfield
                class="shaped-outlined"
                variant="outlined"
                bind:value={password}
                type="password"
                label="密码"
        >
<!--            <HelperText slot="helper">Helper Text</HelperText>-->
        </Textfield>
<!--        <pre class="status">Value: {password}</pre>-->
    </div>
<!--    <div class="useinput">-->
<!--        <span style="margin: 10px">账号</span>-->
<!--        <input type="text" bind:value="{account}">-->
<!--    </div>-->
<!--    <div class="useinput">-->
<!--        <span style="margin: 10px">密码</span>-->
<!--        <input type="password" bind:value="{password}">-->
<!--    </div>-->
    <button on:click={submit} style="background-color: mediumseagreen;width: 16%;height: 45px;margin-top: 10px;border-radius: 23px">登录</button>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    .box{
        width: 400px;
        height: 300px;
        text-align: center;
        outline: none;
        border: 1px solid rgb(94, 92, 233);
        border-radius: 8px;
        background-color: rgba(172, 235, 243, .2);
        box-sizing: border-box;
    }

    .useinput{
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }

    *
    :global(.shaped-outlined
      .mdc-notched-outline
      .mdc-notched-outline__leading) {
        border-radius: 28px 0 0 28px;
        width: 28px;
    }
    *
    :global(.shaped-outlined
      .mdc-notched-outline
      .mdc-notched-outline__trailing) {
        border-radius: 0 28px 28px 0;
    }
    * :global(.shaped-outlined .mdc-notched-outline .mdc-notched-outline__notch) {
        max-width: calc(100% - 28px * 2);
    }
    *
    :global(.shaped-outlined.mdc-text-field--with-leading-icon:not(.mdc-text-field--label-floating)
      .mdc-floating-label) {
        left: 16px;
    }
    * :global(.shaped-outlined + .mdc-text-field-helper-line) {
        padding-left: 32px;
        padding-right: 28px;
    }
</style>

<svelte:head>
    <title> • My blog</title>
    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">

    <!-- Material Typography -->
    <link rel="stylesheet" href="../link/http_unpkg.com_@material_typography@14.0.0_dist_mdc.typography.css" />

    <!-- SMUI -->
    <link rel="stylesheet" href="../link/http_unpkg.com_svelte-material-ui_bare.css" />
</svelte:head>